﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <script type="text/javascript" src="00.jquery-2.0.3.js"></script>

</head>
<body>
    <table id="login">
        <tbody>
            <tr oid="456">
                <td>用户名</td>
                <td>
                    <input type="text" />
                </td>
            </tr>
        </tbody>
    </table>
    <input type="button" value="提交" id="myButton" />
    <input type="button" value="提交" id="youButton" />


    <script type="text/javascript">
        //01.每个页面上jquery的唯一编码,可以通过这个获取jquery的版本
        var test = $.expando;

        //02.防冲突方法:指定符号作为库的符号
        //var myJquery = $.noConflict(true);

        //03.判断是否是函数
        $.isFunction(function () { alert(123) });

        //04.判断是否为数组
        $.isArray([1, 2, 3]);

        //05.判断是否是Window对象
        $.isWindow(window);

        //06.判断是否为数字
        test = $.isNumeric(null)
        test = $.isNumeric(undefined)
        test = $.isNumeric(false)
        test = $.isNumeric("")
        test = $.isNumeric("123.12")
        test = $.isNumeric("123blue");

        //07.type方法:如果是对象会返回function array date regexp  error 或者object.基本类型调用typeof方法
        $.type(function () { });
        $.type(new Date());


        //08.isPlainObject()方法:原型对象为object
        function Person() { }
        Person.prototype = Object.prototype;
        $.isPlainObject(new Person()); //true
        $.isPlainObject(new Object());// true
        $.isPlainObject({});// true

        //09.isEmptyObject:是否是空对象
        $.isEmptyObject(new Object());
        $.isEmptyObject((new Object()).name = "zhangsan");

        //10.error 抛出异常
        try { $.error("异常测试") } catch (e) { console.log(e.message) }


        //11.parseHTML:单个标签或者html字符串格式
        var str = "hello, <b>my name is</b> jQuery.",
            html = $.parseHTML(str);

        //12.parseJSON:字符串转JSON对象
        var obj = jQuery.parseJSON('{ "name": "John" }');

        //13.parseXML:字符串转XML对象
        var xml = "<xml><child></child></xml>"
        var xmlDom = $.parseXML(xml);
        console.log(xmlDom.getElementsByTagName("xml").tagName);

        //14.noop:空函数
        $.noop();

        //15.globalEval:在全局作用域中调用
        (function () {
            eval(" var a = 1;");
            $.globalEval(" var b = 1;")
        })();
        console.log(window.a);  //a被添加到局部作用域中
        console.log(window.b);  //b被添加到全局作用域中

        //16.camelCase:把字符串转化为camelCase的情况
        $.camelCase("-ms-abc-zxc-ad-asd");

        //17.nodeName:判断节点的类型是不是给出的类型
        $.nodeName(document, "#document");

        //18.each:迭代数组或者对象
        $.each([52, 97], function (index, value) {
            console.log(index + ": " + value);
        });
        var obj = {
            "flammable": "inflammable",
            "duh": "no duh"
        };
        $.each(obj, function (key, value) {
            console.log(key + ": " + value);
        });

        //19.trim:去掉字符串
        console.log($.trim("  123123123  "));
        console.log($.trim(obj));

        //20.makeArray:把array-like对象转化为数组,实际上是调用merge方法s
        var arryLikeObject = {};
        arryLikeObject[0] = 1;
        arryLikeObject[1] = 2;
        arryLikeObject[2] = 3;
        arryLikeObject.length = 3;
        console.log($.type(arryLikeObject));
        var arr = $.makeArray(arryLikeObject);
        console.log($.type(arr));

        //21.inArray:求元素在数组中的位置，元素不在数组中返回 -1
        var arr = ["123", 4, "4", "zxczxc"];
        $.inArray(4, arr);

        //22.merge:把第二个数组扩展到第一个数组上面
        var arr1 = [1, 2, 3];
        var arr2 = [{ "name": "张三" }, { "name": "李四" }];
        $.merge(arr1, arr2);  //[1,2,3,{"name":"张三"}, { "name": "李四" } ]

        //23.grep函数:过滤数组中的元素 ，不改变原来的数组
        var arrNums = [1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1];
        var filterNums = $.grep(arrNums, function (value, item) {
            return value > 3;
        });
        console.log(arrNums.join());
        console.log(filterNums.join());

     
        //24.map: 映射的方法 , 把一个数组映射成为另外一个数组
        var arrNums = [1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1];
        var ret = $.map(arrNums, function (value, i) {
            return 2 * value;
        })
        console.log(ret.join());

        //25.guid:返回值为1
        console.log($.guid);

        //26.proxy:返回值是已经改变了函数作用域的函数
        var you = {
            "id": "jack",
            test: function () {
                console.log(this.id);
                return this.id;
            }
        }
        $("#myButton").click(you.test);   //this指向的是myButton对象
        $("#myButton").click();
        $("#youButton").click($.proxy(you.test, you,1,2,3));   //this指向的是this对象
        $("#youButton").click();

        //27.access()

        //28.now :返回当前日期对象的数值
        $.now();

        //29.swap()：Css模块中的方法, 快速的换入换出样式， 来进行计算

        //30.extend：扩展方法
        (function () {
            var target = {
                eat: function () {
                    alert("eat");
                },
                sleep: function () {
                    alert("sleep");
                }
            }

            var src1 = {
                work: function () {
                    alert("work");
                },
                name: {
                    getMidName: function () { alert("midName") }
                }
            }

            var src2 = {
                game: function () {
                    alert("game");
                },
                name: {
                    getFirstName: function () { alert("firstName") },
                    getLastName: function () { alert("lastName") }
                }
            }


            //方式1:src1,src2 扩展到target对象中
            $.extend(target, src1, src2);
            target.work();
            target.game();

            //方式2: src1扩展到jquery(也就是$)对象上面
            $.extend(src1);
            $.work();

            //方式3:扩展到jquery.prototype上面(也就是jquery对象实例上面)
            $.fn.extend(src1);
            $("div").work();

            //方式4：深拷贝对象(子级也会被合并)
            $.extend(true, target, src1, src2)
            target.name.getFirstName();
            target.name.getMidName();
        })();
    </script>

</body>
</html>
